<template>
    <div class="search-div">
        <!-- 搜索表单 -->
        <el-form label-width="70px" size="small">
            <el-form-item label="分类名称">
                <el-input
                v-model="queryDto.cname"
                style="width: 100%"
                placeholder="角色名称"
                ></el-input>
            </el-form-item>
            <el-row style="display:flex">
                <el-button type="primary" size="small" @click="searchCategory">
                搜索
                </el-button>
                <el-button size="small" @click="resetData">重置</el-button>
            </el-row>
        </el-form>

        <!-- 添加按钮 -->
        <div class="tools-div">
            <el-button type="success" size="small" @click="addShow">添 加</el-button>
        </div>
        
        <!--- 角色表格数据 -->
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="cid" label="分类id" width="180" />
            <el-table-column prop="cname" label="分类名称" width="180" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作" align="center" width="280" #default="scope">
                <el-button type="primary" size="small" @click="editShow(scope.row)">
                    修改
                </el-button>
                <el-button type="danger" size="small" @click="deleteById(scope.row)">
                    删除
                </el-button>
            </el-table-column>
        </el-table>
        <!--
        :current-page="pageParams.page" 绑定当前页数
            :page-size="pageParams.limit" 绑定当前分页的条数
            @size-change="fetchData"  当每页条数发生变化是触发时间
            @current-change="fetchData" 页数发生变化时触发函数
            :total="total"  当前的总数
        -->
        <!--分页条-->
        <el-pagination
            :current-page="pageParams.page"
            :page-size="pageParams.limit"
            @size-change="fetchData"
            @current-change="fetchData"
            layout="total, prev, pager, next"
            :total="total"
        />

        <el-dialog v-model="dialogVisible" title="添加或修改" width="40%" :before-close="handleClose">
            <el-form label-width="80px">
            <el-form-item label="分类名称">
                <el-input v-model="category.cname"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
            </el-form>
        </el-dialog>
  </div>

</template>

<script setup>
import { ref , onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import {getCategoryByPage,getCategoryByName,updateCategory,saveCategory,deleteCategoryById} from '../../api/category'
import {updateArticle} from "@/api/article.js";
// 分页条总记录数
let total = ref(0)

//分页数据
const pageParamsForm = {
  page: 1, // 页码
  limit: 2, // 每页记录数
}
const pageParams = ref(pageParamsForm)     // 将pageParamsForm包装成支持响应式的对象

// 定义表格数据模型
let list = ref([])

// 搜索表单数据
const queryDto = ref({"cname": ""})

// 控制对话是否展示的变量
const dialogVisible = ref(false)
const defaultForm = {
    cid: "",
    cname: ""
}
const category = ref(defaultForm)   // 使用ref包裹该对象，使用reactive不方便进行重置
//4.1 分类列表
const findCategoryByPage = async ()=>{

  let page = pageParams.value.page
  let limit = pageParams.value.limit
  let result =  await getCategoryByPage(page,limit);

  let pageInfo = result.data
  //分组
  list.value = pageInfo.list
  //每页页数
  pageParams.value.page = pageInfo.pageNum
  //每页条数
  pageParams.value.limit = pageInfo.pageSize
  //总记录数
  total.value = pageInfo.total
}
//4.1 页面按钮
const fetchData = (page) => {
  console.log(pageParams.value)
  //获取当前页数
  pageParams.value.page = page
  findCategoryByPage()
}
//4.2 根据名称查询分类信息
const searchCategory = async ()=>{
  if(queryDto.value.cname){
    let result = await getCategoryByName(queryDto.value.cname)
    list.value = result.data
  }else {
    pageParams.value = {page: 1,limit: 5}
    await findCategoryByPage()
  }
}
//4.2 重置按钮
const resetData = async ()=>{
  queryDto.value.cname = null
  pageParams.value = {page: 1,limit: 5}
  await findCategoryByPage()
}
//4.3 文章分类新增 按钮
const addShow = async ()=>{
  dialogVisible.value = true
}
//4.3 文章分类修改 按钮
const editShow = async (item)=>{
  category.value = item;
  dialogVisible.value = true
}
//4.3 文章分类 新增 修改按钮的确定
const submit = async ()=>{
  if (category.value.cid){
    //有cid 它是修改
    console.log("修改")
    console.log(category.value)
    await updateCategory(category.value)
  }else {
    //没cid 它是新增
    console.log("新增")
    await saveCategory(category.value)
  }
  category.value = {cid: "", cname: ""}

  dialogVisible.value = false

  pageParams.value = {page: 1,limit: 5}
  await findCategoryByPage()
}
//4.4 删除按钮
const deleteById = async (item)=>{
  await deleteCategoryById(item.cid)
  await findCategoryByPage()
}
const handleClose = async () => {
  category.value = {cid: "", cname: ""}
  dialogVisible.value = false
  await findCategoryByPage()
}
onMounted(()=>{
  pageParams.value = {page: 1,limit: 5}
  findCategoryByPage()
})
</script>

<style scoped>

.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

</style>